import { config } from '@/api/dataScreen';
import * as echarts from 'echarts';
import { onMounted, reactive, ref, toRefs } from 'vue';
/* dataScreen */
export const usedataScreen = () => {
  const screenRef = ref(null);
  const groupData = ref(null);


  const getGroupInfo = async () => {
    const { data } = await config.getInfoGroup()
    groupData.value = data
  }

  const getScale = (w = 3840, h = 1512) => {
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h
    return ww < wh ? ww : wh
  }

  window.onresize = () => {
    screenRef.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
  }
  onMounted(() => {
    getGroupInfo()
    screenRef.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    console.log(111)
  })

  return {
    groupData,
    screenRef
  }
}

/* centerContent */
export const usecenterContent = () => {
  const isVisible = ref(true)
  const clickShow = () => {
    isVisible.value = !isVisible.value
  }

  return {
    isVisible,
    clickShow
  }
}

/* leftContent */
export const useleftContent = () => {
  const state = reactive({
    chartRef: null,
    roseRef: null,
    datas: []
  })

  const initChart = () => {
    const myChart = echarts.init(state.chartRef)
    const mycolor = ['rgba(223,167,15,1)', 'rgba(0,128,255,1)']
    const option = {
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%'
      },
      xAxis: {
        show: false
      },
      yAxis: [
        {
          inverse: true,
          type: 'category',
          data: ['化工企业总数', '企业员工总数'],
          /* 不显示y轴线条 */
          axisLine: {
            show: false
          },
          /* 不显示刻度 */
          axiTick: {
            show: false
          },
          /* y轴文字颜色 */
          axisLabel: {
            inside: true,
            formatter: `{value}\n\n\n`,
            color: '#496e91',
            fontSize: '24',
            fontWeight: 'bold'
          }
        },
        {
          inverse: true,
          type: 'category',
          data: ['31', '5603'],
          /* 不显示y轴线条 */
          axisLine: {
            show: false
          },
          /* 不显示刻度 */
          axiTick: {
            show: false
          },
          /* y轴文字颜色 */
          axisLabel: {
            inside: true,
            rich: {
              name: {
                fontSize: 20,
                color: 'rgba(154,209,255,1)'
              }
            },
            formatter: `{value}{name|个}\n\n`,
            color: '#dfe5eb',
            fontSize: 34,
            fontWeight: 'bold'
          }
        }
      ],
      series: [
        {
          type: 'scatter',
          barwidth: 12,
          data: [31, 11],
          symbolSize: 28,
          itemStyle: {
            normal: {
              color: function (params) {
                const num = mycolor.length
                return mycolor[params.dataIndex % num]
              },
              borderColor: function (params) {
                const num = mycolor.length
                return mycolor[params.dataIndex % num]
              },
              borderWidth: 5,
              opacity: 1
            }
          }
        },
        {
          type: 'scatter',
          barwidth: 7,
          data: [31, 11],
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: '#ffffff'
            },
            opacity: 1
          }
        },
        {
          name: '条',
          type: 'bar',
          data: [31, 11],
          barWidth: 11.2,
          yAxisIndex: 0,
          // barGap: '5',
          itemStyle: {
            color: function (params) {
              const colorList = [
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255,167,73,0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(255,161,0,1)'
                    }
                  ]
                },
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0,128,255,0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,128,255,1)'
                    }
                  ]
                }
              ]
              return colorList[params.dataIndex]
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: '#1d3041'
          }
        }
      ]
    }
    option && myChart.setOption(option)
  }

  const getRoseOriginData = async () => {
    const { data } = await config.getRose()
    state.datas = data
  }

  const initRoseDom = async () => {
    const myColor = ['#0080ff', '#f7b607', '#e86925', '#2eeeff', '#1af5be']
    await getRoseOriginData()
    const chartDatas = state.datas?.map((item, index) => {
      return {
        name: item.name,
        value: item.value,
        textStyle: {
          fontSize: 24,
          color: myColor[index]
        }
      }
    })

    const total = chartDatas.reduce((total, cur) => {
      return total + cur.value
    }, 0)

    const legendOptions = {
      icon: 'circle',
      orient: 'vertical',
      textStyle: {
        padding: [11, 0, 11, 0],
        rich: {
          name: {
            fontSize: 24,
            color: '#9ad1ff',
            padding: [10, 5, 10, 0],
            align: 'left'
          },
          percent: {
            fontSize: 24,
            color: function (params) {
              return myColor[params.dataIndex]
            }
          },
          weight: {
            fontSize: 28,
            color: '#fff',
            fontWeight: 'bold'
          },
          style: {
            fontSize: 24,
            color: '#9ad1ff'
          }
        }
      },
      formatter: function (name) {
        const res = chartDatas.filter(v => v.name === name)
        const percent = ((res[0].value * 100) / total).toFixed(0)
          const weight = res[0].value
        return (
          '{name|' +
          name +
          '}\n{percent|' +
          percent +
          '%}{weight|  ' +
          weight +
          '}{style|个}'
        )
      }
    }
    const myChart = echarts.init(state.roseRef)
    const option = {
      title: {
        text: '总计',
        left: 'center',
        top: '58%',
        textStyle: {
          fontSize: 24,
          color: '#9ad1ff'
        }
      },
      grid: {
        top: '55'
      },
      color: myColor,
      legend: [
        {
          left: '40',
          align: 'right',
          // padding: [1],
          top: '40',
          itemGap: 40,
          data: ['建筑工程', '安全设备'],
          ...legendOptions
        },
        {
          right: '10',
          align: 'left',
          top: '9',
          itemGap: 20,
          data: ['险维修', '设计', '技术服务'],
          ...legendOptions
        },
        {
          left: 'center',
          top: 'center',
          icon: 'none',
          align: 'center',
          selectedMode: false,
          textStyle: {
            rich: {
              total: {
                fontSize: 50,
                color: '#fff',
                fontFamily: 'DS Digital'
              },
              white: {
                fontSize: 24,
                color: '#9ad1ff',
                fontWeight: 'bold'
              }
            }
          },
          formatter: function (name) {
            const total = chartDatas.reduce((total, cur) => {
              return total + cur.value
            }, 0)
            return '{total|' + total + '}{white|家}'
          },
          data: [chartDatas[0].name]
        }
      ],
      series: [
        {
          type: 'pie',
          radius: [63, 105],
          center: ['50%', '50%'],
          roseType: 'radius',
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: chartDatas
        }
      ]
    }
    option && myChart.setOption(option)
  }

  onMounted(() => {
    initChart()
    initRoseDom()
  })
  return {
    ...toRefs(state)
  }
}

/* rightContent */
export const userightContent = () => {
  const state = reactive({
    companyList: [],
    tableDatas: [],
    active: false
  })

  const getCompanyList = async () => {
    const { data } = await config.getCompany()
    state.companyList = data
  }
  const getTableData = async () => {
              const { data } = await config.getTableData()
    state.tableDatas = data
  }

  onMounted(() => {
    getTableData()
    getCompanyList()
  })
  return {
    ...toRefs(state)
  }
}
